<template>
  <!-- 封装表单 -->
  <el-form
    :validate-on-rule-change="false"
    :model="form"
    :rules="rules"
    :inline="true"
    :size="option.size || 'small'"
    :ref="formName"
    :label-width="option.labelWidth || '80px'"
    :style="styleS"
  >
    <el-row>
      <el-col
        v-for="item in formColumn"
        :key="item.label"
        :xs="24"
        :sm="24"
        :lg="item.span ? item.span : 12"
      >
        <el-form-item
          :label="item.label"
          :prop="item.prop"
          class="form-item-box"
        >
          <slot :name="item.prop + 'F'" v-bind:row="item">
            <component
              v-bind="item"
              :is="item.type || 'Input'"
              :value.sync="addForm[item.prop]"
            ></component>
          </slot>
        </el-form-item>
      </el-col>
      <el-col v-if="formName === 'searchForm'">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >搜索</el-button
          >
          <el-button icon="el-icon-delete" @click="resetForm(formName)"
            >清空</el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import CompFormItem from "./formItem";

export default {
  name: "ComForm",
  components: {
    CompFormItem,
    ...CompFormItem.components,
  },
  props: {
    formName: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      form: "",
    };
  },
  watch: {},
  computed: {
    /** 解析表单的正则验证***/
    rules() {
      if (this.formName === "searchForm") return [];
      let rules = this.formColumn.reduce((map, i) => {
        if (i.rules) {
          if (!i.disabled) {
            map[i.prop] = i.rules;
          }
        }
        return map;
      }, {});
      return rules;
    },
    styleS() {
      return {
        "--input-width": this.option.labelWidth || "80px",
      };
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="less">
.form-item-box {
  width: 100%;
  display: flex;

  /deep/.el-form-item__content {
    display: block;
    width: calc(100% - var(--input-width));
  }
}
</style>
